<template>
  <div class="rate">
    <el-dialog
      :visible.sync="is_show"
      title="案件评分"
      center
      @closed="closed"
      append-to-body
    >
      <el-tabs v-model="activeName" :before-leave="tabsClick">
        <el-tab-pane label="代理人" name="agent">
          <el-form :rules="rules" :model="form" label-position="top" ref="form">
            <el-form-item label="服务态度" prop="attitude" label-width="120">
              <template slot="label">
                <span>服务态度</span>
                <el-popover
                  placement="right"
                  title="服务态度分"
                  width="200"
                  trigger="hover"
                  content="请您根据代理人与您交涉时的服务态度进行评分，评分越高代表您越满意!"
                >
                  <i class="el-icon-info orange ml10" slot="reference"></i>
                </el-popover>
              </template>
              <el-rate show-score allow-half v-model="form.attitude"></el-rate>
            </el-form-item>
            <el-form-item label="撰写质量" prop="quelity">
              <template slot="label">
                <span>撰写质量</span>
                <el-popover
                  placement="right"
                  title="撰写质量分"
                  width="200"
                  trigger="hover"
                  content="请您根据代理人撰写案件的质量进行评分，评分越高代表您越满意!"
                >
                  <i class="el-icon-info orange ml10" slot="reference"></i>
                </el-popover>
              </template>
              <el-rate show-score allow-half v-model="form.quelity"></el-rate>
            </el-form-item>
            <el-form-item label="撰写耗时" prop="take_time">
              <template slot="label">
                <span>撰写耗时</span>
                <el-popover
                  placement="right"
                  title="撰写耗时分"
                  width="200"
                  trigger="hover"
                  content="请您根据代理人撰写案件所耗时长进行评分，评分越高代表您越满意!"
                >
                  <i class="el-icon-info orange ml10" slot="reference"></i>
                </el-popover>
              </template>
              <el-rate show-score allow-half v-model="form.take_time"></el-rate>
            </el-form-item>
            <el-form-item label="评价" prop="remark" class="remark">
              <template slot="label">
                <span>评价</span>
                <el-popover
                  placement="right"
                  title="评价"
                  width="200"
                  trigger="hover"
                  content="此条文字评价是匿名评价，代理人无法看到，请您放心提出您的宝贵意见，我们会及时按照您的意见进行改善及优化!"
                >
                  <i class="el-icon-info orange ml10" slot="reference"></i>
                </el-popover>
              </template>
              <el-input
                :show-word-limit="true"
                :maxlength="500"
                :rows="4"
                type="textarea"
                placeholder="请输入您对案件代理人的评价"
                v-model="form.remark"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="专属顾问" name="process">
          <el-form
            :rules="rules"
            :model="processForm"
            label-position="top"
            ref="processFormRef"
          >
            <el-form-item label="服务态度" prop="attitude" label-width="120">
              <template slot="label">
                <span>服务态度</span>
                <el-popover
                  placement="right"
                  title="服务态度分"
                  width="200"
                  trigger="hover"
                  content="请您根据专属顾问与您交涉时的服务态度进行评分，评分越高代表您越满意!"
                >
                  <i class="el-icon-info orange ml10" slot="reference"></i>
                </el-popover>
              </template>
              <el-rate
                show-score
                allow-half
                v-model="processForm.attitude"
              ></el-rate>
            </el-form-item>
            <el-form-item label="服务效率" prop="efficiency">
              <template slot="label">
                <span>服务效率</span>
                <el-popover
                  placement="right"
                  title="服务效率分"
                  width="200"
                  trigger="hover"
                  content="请您根据专属顾问为您办理业务的效率进行评分，评分越高代表您越满意!"
                >
                  <i class="el-icon-info orange ml10" slot="reference"></i>
                </el-popover>
              </template>
              <el-rate
                show-score
                allow-half
                v-model="processForm.efficiency"
              ></el-rate>
            </el-form-item>
            <el-form-item label="专业水平" prop="professionalism">
              <template slot="label">
                <span>专业水平</span>
                <el-popover
                  placement="right"
                  title="专业水平分"
                  width="200"
                  trigger="hover"
                  content="请您根据专属顾问处理案件的专业水平进行评分，评分越高代表您越满意!"
                >
                  <i class="el-icon-info orange ml10" slot="reference"></i>
                </el-popover>
              </template>
              <el-rate
                show-score
                allow-half
                v-model="processForm.professionalism"
              ></el-rate>
            </el-form-item>
            <el-form-item label="评价" prop="remark" class="remark">
              <template slot="label">
                <span>评价</span>
                <el-popover
                  placement="right"
                  title="评价"
                  width="200"
                  trigger="hover"
                  content="此条文字评价是匿名评价，专属顾问无法看到，请您放心提出您的宝贵意见，我们会及时按照您的意见进行改善及优化!"
                >
                  <i class="el-icon-info orange ml10" slot="reference"></i>
                </el-popover>
              </template>
              <el-input
                :show-word-limit="true"
                :maxlength="500"
                :rows="4"
                type="textarea"
                placeholder="请输入您对案件专属顾问的评价"
                v-model="processForm.remark"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <template slot="footer">
        <el-button type="primary" v-no-more-click:5000 @click="submit" :disabled='isDisabeld'
          >确认</el-button
        >
        <el-button @click="cancel">取消</el-button>
      </template>
    </el-dialog>
    <additionalRate ref="additionalRate" @refresh="refresh" type="1" />

    <reward ref="reward"></reward>
  </div>
</template>

<script>
import additionalRate from "./additionalRate";
// 打赏
import reward from "~/pages/user/order/components/reward";
export default {
  components: {
    additionalRate,
    reward,
  },
  data() {
    let check = (rule, value, callback) => {
      if (!value || value < 0.5) {
        return callback(new Error());
      } else {
        callback();
      }
    };
    return {
      is_show: false,
      order_id: null,
      order: {},
      activeName: "agent",
      form: {
        attitude: 0,
        quelity: 0,
        take_time: 0,
        remark: "",
      },
      processForm: {
        attitude: 0,
        efficiency: 0,
        professionalism: 0,
        remark: "",
      },
      rules: {
        attitude: [
          {
            required: true,
            validator: check,
            message: "请为代理人的服务态度评分，最低0.5分",
            trigger: "change",
          },
        ],
        quelity: [
          {
            required: true,
            validator: check,
            message: "请为代理人的案件撰写质量评分，最低0.5分",
            trigger: "change",
          },
        ],
        take_time: [
          {
            required: true,
            validator: check,
            message: "请为代理人的案件撰写耗时评分，最低0.5分",
            trigger: "change",
          },
        ],
        attitude: [
          {
            required: true,
            validator: check,
            message: "请为专属顾问的服务态度评分，最低0.5分",
            trigger: "change",
          },
        ],
        efficiency: [
          {
            required: true,
            validator: check,
            message: "请为专属顾问的服务效率评分，最低0.5分",
            trigger: "change",
          },
        ],
        professionalism: [
          {
            required: true,
            validator: check,
            message: "请为专属顾问的专业水平评分，最低0.5分",
            trigger: "change",
          },
        ],
      },
      processRules: {
        
      },
    };
  },
  computed: {
    isDisabeld () {
      if (this.activeName == 'agent' && this.order.grades) {
        return true
      }
      if (this.activeName == 'process' && this.order.process_grades) {
        return true
      }
      return false
    }
  },
  methods: {
    tabsClick (activeName) {
      if (activeName == 'agent' && this.order.grades) {
        this.$alert('您已经给代理人评过分了！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
           
          }
        })
        return true
      } 
      if (activeName == 'process' && this.order.process_grades) {
        this.$alert('您已经给专属顾问评过分了！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
           
          }
        })
        return true
      } 

    },
    showOn(data) {
      this.order = data;
      if(this.order.order) {
        this.order_id = data.order.id;
      } else {
        this.order_id = data.id;
      }
      this.is_show = true;
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
        this.$refs["processFormRef"].clearValidate();
      });
      if (this.order.grades) {
        this.activeName = 'process'

        this.form.attitude = Number(this.order.grades.attitude)
        this.form.quelity = Number(this.order.grades.quelity)
        this.form.take_time = Number(this.order.grades.take_time)
        if (this.order.grades.remark) this.form.remark = this.order.grades.remark
      } else if (this.order.process_grades) {
        this.activeName = 'agent'
        this.processForm.attitude = Number(this.order.process_grades.attitude)
        this.processForm.efficiency = Number(this.order.process_grades.efficiency)
        this.processForm.professionalism = Number(this.order.process_grades.professionalism)
        if (this.order.process_grades.remark) this.processForm.remark = this.order.process_grades.remark
      }
      
    },
    cancel() {
      this.$confirm(
        '确定离开此次评分吗？<br>稍后如需对订单进行评分，可在对应订单的查看详情页面中点击<span class="finish">案件评分</span>按钮对案件进行评分',
        "提示",
        {
          cancelButtonText: "继续评分",
          confirmButtonText: "我已知晓",
          dangerouslyUseHTMLString: true,
        }
      )
        .then(() => {
          this.is_show = false;
        })
        .catch();
    },
    refresh() {
      this.$emit("refresh");
      this.is_show = false;
    },
    agentSubmit () {
      let params = {};
      for (let key in this.form) {
        if (this.form[key]) {
          params[key] = this.form[key];
        }
      }
      let that = this;
      this.$axios
        .post(`/api/grades/${this.order_id}`, params)
        .then((res) => {
          if (res.data.code == 200) {
            this.$emit("refresh");
            let grades = {
              id: res.data.data.id,
              quelity: res.data.data.quelity,
              attitude: res.data.data.attitude,
              take_time: res.data.data.take_time,
            };
            this.order.grades = grades;
            // 判断是否需要打赏
            let average = (this.form.attitude + this.form.quelity +  this.form.take_time) / 3;
            if (average >= 4.5) {
              this.$confirm("感觉代理人不错的话打赏一下吧！", "提示", {
                distinguishCancelAndClose: true,
                center: true,
                confirmButtonText: "打赏",
                cancelButtonText: "取消",
              })
                .then(() => {
                  that.$refs["reward"].show(this.order);
                  that.is_show = false;
                  that.$refs["form"].resetFields();
                  this.$emit("refresh");
                })
                .catch((action) => {
                  that.is_show = false;
                });
            } else {
              that.is_show = false;
            }
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        });
    },
    porcessSubmit () {
      let params = {};
      for (let key in this.processForm) {
        if (this.processForm[key]) {
          params[key] = this.processForm[key];
        }
      }
      let that = this
      this.$axios
        .post(`api/processGrades/${this.order_id}`, params)
        .then((res) => {
          if (res.data.code == 200) {
            this.$emit("refresh");
            let grades = {
              id: res.data.data.id,
              attitude: res.data.data.attitude,
              efficiency: res.data.data.efficiency,
              professionalism: res.data.data.professionalism,
            };
            // this.order.grades = grades;
            let message = '感谢您做出的评价！'
            let isAgentRate = false
            if (!this.order.grades) {
              message = '感谢您做出的评价！您还可以对代理人评分哦！'
            } else {
              isAgentRate = true
            }
            this.$confirm(message, "提示", {
              distinguishCancelAndClose: true,
              center: true,
              confirmButtonText: "去评分",
              cancelButtonText: "取消",
            })
              .then(() => {
                // that.$refs["reward"].show(this.order);
                // that.is_show = false;
                // that.$refs["form"].resetFields();
                that.$emit("refresh");
                that.activeName = 'agent'
              })
              .catch((action) => {
                that.is_show = false;
                that.$refs["processFormRef"].resetFields();
              });
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        });
    },
    submit() {
      let formRefName = this.activeName == 'agent' ? 'form' : 'processFormRef'
      this.$refs[formRefName].validate((valid) => {
        if (valid) {
          if (this.activeName == 'agent') {
            this.agentSubmit()
          } else {
            this.porcessSubmit()
          }
        }
      });
    },
    closed() {
      Object.assign(this.$data, this.$options.data());
      this.$refs["form"].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  max-width: 500px;
  .el-form {
    .remark {
      .el-form-item__label {
        padding-left: 10px;
      }
    }
  }
  // .rate {
  //     .el-dialog {

  //     }
  // }
  // .infoIcon {

  // }
}
</style>
